import React, { Component } from "react";
import { Icon, Card, Checkbox, Tabs, Button } from "antd";
import * as echarts from "echarts";
import LinkButton from "../../../components/link-button/index";
const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}
class condition extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  options = () => {
    var chartDom = document.getElementsByClassName("main")[0];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: "category",
        name: "时间（年，月，日）",
        axisTick: {
          alignWithLabel: true,
        },
        boundaryGap: false,
        data: [
          "2021-07-08/09:03",
          "2021-07-08/10:03",
          "2021-07-08/11:03",
          "2021-07-08/12:03",
          "2021-07-08/13:03",
          "2021-07-08/14:03",
          "2021-07-08/15:03",
        ],
      },
      legend: {
        data: ["e", "e1", "e2", "e3"],
      },

      yAxis: {
        name: "流量bps",
        type: "value",
        axisLabel: {
          formatter: "{value}kbps",
        },
      },
      series: [
        {
          name: "e",
          data: [120, 132, 101, 134, 90, 230, 210],
          type: "line",
          stack: "Total",
          smooth: true,
          color: "#87CEEB",
        },
        {
          name: "e1",
          data: [220, 182, 191, 234, 290, 330, 310],
          type: "line",
          stack: "Total",
          smooth: true,
        },
        {
          name: "e2",
          data: [150, 232, 201, 154, 190, 330, 410],
          type: "line",
          stack: "Total",
          smooth: true,
        },
        {
          name: "e3",
          data: [320, 332, 301, 334, 390, 330, 320],
          type: "line",
          stack: "Total",
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options1 = () => {
    var chartDom = document.getElementsByClassName("main")[1];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["e", "e1"],
      },

      xAxis: {
        name: "时间（年，月，日）",
        type: "category",
        boundaryGap: false,
        data: [
          "2021-07-13/07:55",
          "2021-07-13/07:56",
          "2021-07-13/07:57",
          "2021-07-13/07:58",
          "2021-07-13/07:59",
          "2021-07-13/08:01",
          "2021-07-13/08:05",
        ],
      },
      yAxis: {
        name: "条数eps",
        type: "value",
      },
      series: [
        {
          name: "e",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
          color: "#87CEEB",
        },
        {
          name: "e1",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
          color: "#FF4500",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options2 = (container, yData, ratio, surplus) => {
    var myChart = echarts.init(document.getElementsByClassName("main")[2]);
    var option = {
      grid: {
        left: "8%",
        right: "8%",
        bottom: "4%",
        top: 10,
        containLabel: true,
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        inverse: true,
        //城市名称
        data: yData,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,

          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          stack: "chart",
          z: 3,
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#00BFFF",
            },
          },
          label: {
            normal: {
              position: "right",
              show: true,
              color: "black",
              formatter: "{c}%",
            },
          },
          data: ratio,
        },
        {
          type: "bar",
          stack: "chart",
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#ececec",
            },
          },
          data: surplus,
        },
      ],
    };
    myChart.setOption(option);
  };
  options3 = () => {
    var chartDom = document.getElementsByClassName("main")[3];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "bottom",
      },
      // eslint-disable-next-line no-dupe-keys

      series: [
        {
          name: "服务器",
          type: "pie",
          radius: ["30%", "60%"],
          data: [
            {
              value: 50,
              name: "unknown",
              itemStyle: { color: "#6495ED" },
            },
            {
              value: 15,
              name: "SMB",
              itemStyle: { color: "#EE82EE" },
            },
            {
              value: 10,
              name: "MsSQL",
              itemStyle: { color: "#00FFFF" },
            },
            {
              value: 8,
              name: "SSH",
              itemStyle: { color: "#9400D3" },
            },
            {
              value: 8,
              name: "SMTP",
              itemStyle: { color: "#7FFFAA" },
            },
          ],
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              color: "black",
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };
  options4 = (container, yData, ratio, surplus) => {
    var myChart = echarts.init(document.getElementsByClassName("main")[4]);
    var option = {
      grid: {
        left: "8%",
        right: "8%",
        bottom: "4%",
        top: 10,
        containLabel: true,
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        inverse: true,
        //城市名称
        data: yData,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,

          fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          stack: "chart",
          z: 3,
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#00BFFF",
            },
          },
          label: {
            normal: {
              position: "right",
              show: true,
              color: "black",
              formatter: "{c}%",
            },
          },
          data: ratio,
        },
        {
          type: "bar",
          stack: "chart",
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#ececec",
            },
          },
          data: surplus,
        },
      ],
    };
    myChart.setOption(option);
  };
  options5 = () => {
    var chartDom = document.getElementsByClassName("main")[5];
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: "category",
        name: "时间（年，月，日）",
        boundaryGap: false,
        axisTick: {
          alignWithLabel: true,
        },
        data: [
          "2021-5-20 07:08",
          "2021-5-20 07:08",
          "2021-5-20 07:08",
          "2021-5-20 07:08",
          "2021-5-20 07:08",
        ],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value}bps",
        },
      },
      series: [
        {
          data: [150, 230, 224, 218, 135],
          type: "line",
        },
      ],
    };

    option && myChart.setOption(option);
  };
  options6 = (container, yData, ratio, surplus) => {
    var myChart = echarts.init(document.getElementsByClassName("main")[6]);
    var option = {
      grid: {
        left: "8%",
        right: "8%",
        bottom: "4%",
        top: 10,
        containLabel: true,
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: "category",
        inverse: true,
        //城市名称
        data: yData,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,

          // fontSize: 15,
        },
      },
      series: [
        {
          type: "bar",
          stack: "chart",
          z: 3,
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#00BFFF",
            },
          },
          label: {
            normal: {
              show: true,
              position: "right",
              color: "black",
              formatter: "{c}kb",
            },
          },
          data: ratio,
        },
        {
          type: "bar",
          stack: "chart",
          barWidth: "15",
          itemStyle: {
            normal: {
              color: "#ececec",
            },
          },
          data: surplus,
        },
      ],
    };
    myChart.setOption(option);
  };
  componentDidMount() {
    this.options();
    this.options1();
    var yData = [
      "河北",
      "北京",
      "天津",
      "河南",
      "山东",
      "内蒙",
      "宁夏",
      "陕西",
      "四川",
      "湖南",
    ];
    //百分比数据
    var ratio = [45, 12, 10, 7, 6, 5, 5, 4, 3, 2];
    //100%-ratio
    var surplus = [55, 88, 90, 93, 94, 95, 95, 96, 97, 98];
    this.options2("regionDetail", yData, ratio, surplus);
    this.options3();
    var yData1 = [
      "河北",
      "北京",
      "天津",
      "河南",
      "山东",
      "内蒙",
      "宁夏",
      "陕西",
      "四川",
      "湖南",
    ];
    //百分比数据
    var ratio1 = [45, 12, 10, 7, 6, 5, 5, 4, 3, 2];
    //100%-ratio
    var surplus1 = [55, 88, 90, 93, 94, 95, 95, 96, 97, 98];
    this.options4("regionDetail", yData1, ratio1, surplus1);
    this.options5();
    this.options1();
    var yData2 = ["10:50", "10:55", "11:00", "11:30", "12:00"];
    //百分比数据
    var ratio2 = [45, 12, 10, 7, 6];
    //100%-ratio
    var surplus2 = [55, 88, 90, 93, 94];
    this.options6("regionDetail", yData2, ratio2, surplus2);
  }
  render() {
    const anniu = (
      <span>
        <Button>传统流量/工控流量</Button>
        <Button>传输层流量</Button>
      </span>
    );
    const anniu1 = (
      <span>
        <Button>接受流量</Button>
        <Button>发送流量</Button>
      </span>
    );
    return (
      <div style={{ margin: 10 }}>
        <div>
          <Card title="系统信息">
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
              }}
            >
              <div>
                <div
                  style={{
                    border: "15px #ececec solid",
                    width: "120px",
                    height: "120px",
                    borderRadius: "50%",
                    borderBottom: "15px #fff solid",
                    textAlign: "center",
                    lineHeight: "100px",
                    fontSize: 20,
                  }}
                >
                  0%
                </div>
                <span
                  style={{
                    textAlign: "center",
                    width: "120px",
                    display: "inline-block",
                  }}
                >
                  CPU
                </span>
              </div>
              <div>
                <div
                  style={{
                    border: "15px #ececec solid",
                    width: "120px",
                    height: "120px",
                    borderRadius: "50%",
                    borderBottom: "15px #fff solid",
                    textAlign: "center",
                    lineHeight: "100px",
                    fontSize: 20,
                  }}
                >
                  0/64GB
                </div>
                <span
                  style={{
                    textAlign: "center",
                    width: "120px",
                    display: "inline-block",
                  }}
                >
                  内存
                </span>
              </div>
              <div>
                <div
                  style={{
                    border: "15px #ececec solid",
                    width: "120px",
                    height: "120px",
                    borderRadius: "50%",
                    borderBottom: "15px #fff solid",
                    textAlign: "center",
                    lineHeight: "100px",
                    fontSize: 20,
                  }}
                >
                  0/1636GB
                </div>
                <span
                  style={{
                    textAlign: "center",
                    width: "120px",
                    display: "inline-block",
                  }}
                >
                  数据磁盘
                </span>
              </div>
              <div style={{ borderLeft: "1px solid #cecece" }}>
                <div>
                  <div
                    style={{
                      display: "flex",
                      width: 300,
                      justifyContent: "space-around",
                      margin: "5px 0",
                    }}
                  >
                    <span>
                      <Icon
                        style={{ color: "green", fontSize: 20 }}
                        type="cluster"
                      />
                    </span>
                    <span>【管理接口】eth10</span>
                    <span>已启用，链路正常</span>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      width: 300,
                      justifyContent: "space-around",
                      margin: "5px 0",
                    }}
                  >
                    <span>
                      <Icon
                        style={{ color: "green", fontSize: 20 }}
                        type="cluster"
                      />
                    </span>
                    <span>【管理接口】eth5 </span>
                    <span>已启用，链路正常</span>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      width: 300,
                      justifyContent: "space-around",
                      margin: "5px 0",
                    }}
                  >
                    <span>
                      <Icon
                        style={{ color: "green", fontSize: 20 }}
                        type="cluster"
                      />
                    </span>
                    <span>【管理接口】eth8 </span>
                    <span>已启用，链路正常</span>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      width: 300,
                      justifyContent: "space-around",
                    }}
                  >
                    <span>
                      <Icon
                        style={{ color: "green", fontSize: 20 }}
                        type="cluster"
                      />
                    </span>
                    <span>【管理接口】eth3 </span>
                    <span>已启用，链路正常</span>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      width: 300,
                      justifyContent: "space-around",
                      margin: "5px 0",
                    }}
                  >
                    <span>
                      <Icon
                        style={{ color: "green", fontSize: 20 }}
                        type="cluster"
                      />
                    </span>
                    <span>【管理接口】eth9 </span>
                    <span>已启用，链路正常</span>
                  </div>
                  <div>
                    <LinkButton style={{ marginLeft: 260 }}>更多</LinkButton>
                  </div>
                </div>
              </div>
              <div style={{ width: 450, borderLeft: "1px solid #cecece" }}>
                <div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      系统时间
                    </span>
                    <span>2021-08-26 09:30:01</span>
                  </div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      管理IP地址
                    </span>
                    <span>192.168.30.126</span>
                  </div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      软件版本
                    </span>
                    <span>EVEREST Ultimate v4.20.1188 Beta</span>
                  </div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      规则版本
                    </span>
                    <span>EVEREST Ultimate v4.20.1188 Beta</span>
                  </div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      序列号
                    </span>
                    <span>2021-08-26 09:30:01</span>
                  </div>
                  <div>
                    <span
                      style={{
                        width: 100,
                        display: "inline-block",
                        textAlign: "right",
                        marginRight: 40,
                        marginTop: 5,
                      }}
                    >
                      证书信息
                    </span>
                    <span>内部测试（2021-03-24到期）</span>
                  </div>
                </div>
              </div>
            </div>
          </Card>
          <Card title="网络流量">
            <Tabs defaultActiveKey="1" onChange={callback}>
              <TabPane tab="1小时" key="1">
                <div
                  className="main"
                  style={{ width: 1200, height: 400 }}
                ></div>
              </TabPane>
              <TabPane tab="24小时" key="2">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="一周" key="3">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
          </Card>
          <Card title="日志外发">
            <Tabs defaultActiveKey="1" onChange={callback}>
              <TabPane tab="1小时" key="1">
                <div
                  className="main"
                  style={{ width: 1200, height: 400 }}
                ></div>
              </TabPane>
              <TabPane tab="24小时" key="2">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="一周" key="3">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
          </Card>
          <Card title="流量访问top">
            <div>
              <div>入方向应用</div>
              <div>
                <Checkbox checked /> 来源地区 <Checkbox checked />
                应用 <Checkbox checked /> 会话
                <Checkbox /> 来源运营商 <Checkbox /> 来源IP <Checkbox /> 端口
                <Checkbox /> 资产IP <Checkbox /> 空闲资产IP <Checkbox />
                异常访问
                <Checkbox /> 高危端口 <Checkbox /> 非标准应用
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-around" }}>
              <div className="main" style={{ width: 400, height: 400 }}></div>
              <div style={{ marginTop: 15 }}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    fontSize: "12",
                    fontWeight: "bold",
                  }}
                >
                  <span>入方向应用</span>
                  <LinkButton>统计数据</LinkButton>
                </div>
                <div className="main" style={{ width: 400, height: 300 }}></div>
              </div>
              <div className="main" style={{ width: 400, height: 400 }}></div>
            </div>
          </Card>
          <div style={{ display: "flex" }}>
            <Card title="流量统计图" extra={anniu} style={{ width: 800 }}>
              <div className="main" style={{ width: 800, height: 300 }}></div>
            </Card>
            <Card style={{ flex: 1 }} title="流量峰值时间点Top5" extra={anniu1}>
              <div className="main" style={{ width: 400, height: 300 }}></div>
            </Card>
          </div>
        </div>
      </div>
    );
  }
}

export default condition;
